CSS Border Image Property

    In this Advance CSS tutorial, we will discuss the border-image property and use it to insert an image as a border for an element.

    CSS border-image Property

    We can define the border color and thickness using the border property, but border-image property allows users to specify an image as a border for an element. The border-image property itself is divided into three parts.

    • First, the image that would act as a border.
    • Second, from where to slice the image.
    • Third, define if the middle portion of the image should be repeated or stretched.

    Working of border-image Property

    The border-image property accepts the image using a url() function, and divide it into nine parts like a matrix of 3X3. The sliced corner pieces are placed at the border corner of the element, and the middle part can be repeated or stretched according to the user-specified CSS code.

    Example 

    <!DOCTYPE html>
<html>
<head>
  <style>
    .img_border{
        border: 10px solid transparent;
        padding: 40px;
        border-image: url(img.png) 30 stretch;
    }

  </style>
</head>
<body>
    <p class="img_border">Image Border</p>
</body>
</html>

    Note: The stretch value stretches the middle section of the image, and the round value repeats the middle section of the image. The stretch and round value will only work if the image is small.

    border-image associated properties

    Actually, the border-image property is a shorthand property for border-image-source, border-image-slice, border-image-width, border-image-outset, and border-image-repeat properties.

    Property Description
    border-image-source It defines the image path or location. It can be used when we do not want to use the border-image shorthand property.
    border-image-slice Define how to slice the border image.
    border-image-width Represent the image border width.
    border-image-outset It defines how much the border image pixels should be placed outside the border edges of the element.
    border-image-repeat It specifies whether the border image should be stretched, round, or repeated.

    Summary

    • The border-image property can set an image as a border for an element.
    • The border-image property slices the image into nine sections and uses the edges sections as the corner for the element borders.
    • The border-image property is a shorthand for border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat properties.
    Previous Tutorial Next Tutorial